<!--
 * @Description: 退店管理列表
 * @Author: liyujie
 * @Date: 2021/02/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/02/07
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    退店管理
                </div>
            </div>
            <!-- /header -->
            <el-tabs
                v-model="filterData.type"
                @tab-click="doTableLayout"
            >
                <el-tab-pane
                    label="待审核"
                    name="1"
                />
                <el-tab-pane
                    label="已通过"
                    name="2"
                />
                <el-tab-pane
                    label="已拒绝"
                    name="-1"
                />
                <el-tab-pane
                    label="已撤销"
                    name="-2"
                />
            </el-tabs>
            <!-- 筛选-->
            <div class="filter-view">
                <div
                    class="header-new-box"
                    v-show="filterData.type === '2'"
                >
                    <el-radio-group
                        v-model="filterData.pass_sub_type"
                        size="small"
                        @change="doTableLayout"
                    >
                        <el-radio-button
                            v-for="item in passStatusList"
                            :key="item.value"
                            :label="item.value"
                        >
                            {{ item.label }}
                        </el-radio-button>
                    </el-radio-group>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        店铺名称
                    </p>
                    <el-input
                        placeholder="请输入店铺名称"
                        v-model="filterData.shop_keyword"
                        suffix-icon="el-icon-search"
                        clearable
                        size="small"
                        @keydown.enter.native="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        企业名称
                    </p>
                    <el-input
                        placeholder="请输入企业名称"
                        v-model="filterData.company_keyword"
                        suffix-icon="el-icon-search"
                        clearable
                        size="small"
                        @keydown.enter.native="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <div class="header-new-box-title">
                        客户类型
                    </div>
                    <el-select
                        v-model="filterData.shop_group"
                        placeholder="全部"
                        size="small"
                        filterable
                        style="width: 152px"
                        @change="getTableData(1)"
                    >
                        <el-option
                            label="全部"
                            :value="99"
                        />
                        <el-option
                            label="未设置"
                            :value="0"
                        />
                        <el-option
                            v-for="item in shop_group_list"
                            :key="item.shop_group"
                            :label="item.title"
                            :value="item.shop_group"
                        />
                    </el-select>
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        联系方式
                    </p>
                    <el-input
                        placeholder="请输入联系方式"
                        v-model="filterData.contact_keyword"
                        suffix-icon="el-icon-search"
                        clearable
                        size="small"
                        @keydown.enter.native="getTableData(1)"
                    />
                </div>
                <div class="header-new-box">
                    <p class="header-new-box-title">
                        申请时间
                    </p>
                    <el-date-picker
                        v-model="dateTimeRange"
                        type="datetimerange"
                        ref="datetimerange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        style="width: 400px"
                        value-format="timestamp"
                    />
                </div>
                <div class="header-new-box">
                    <el-button
                        type="primary"
                        size="small"
                        @click="getTableData(1)"
                    >
                        查询
                    </el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleExport"
                    >
                        数据导出
                    </el-button>
                </div>
            </div>
            <!--筛选-->

            <!-- table -->
            <el-table
                :data="tableData"
                class="data-table"
                height="100%"
                style="width: 100%;"
                ref="table"
                v-loading="tableLoading"
                @sort-change="handleSortChange"
            >
                <el-table-column
                    label="序号"
                    align="center"
                    width="80"
                    type="index"
                />
                <el-table-column
                    prop="shop_title"
                    key="shop_title"
                    label="店铺名称"
                    show-overflow-tooltip
                    align="left"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    label="企业名称"
                    prop="company_name"
                    key="company_name"
                    show-overflow-tooltip
                    align="left"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="contact_name"
                    key="contact_name"
                    label="店铺负责人"
                    show-overflow-tooltip
                    :width="150"
                    align="center"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="shop_group_title"
                    key="shop_group_title"
                    label="客户类型"
                    show-overflow-tooltip
                    :width="120"
                    align="center"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    label="入驻时间"
                    align="center"
                    :width="170"
                >
                    <template slot-scope="scope">
                        {{ scope.row.shop_create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hire_username"
                    key="hire_username"
                    label="手机号"
                    show-overflow-tooltip
                    align="center"
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    label="审核状态"
                    align="center"
                    width="120"
                    key="verify"
                    v-if="!(filterData.pass_sub_type === 4 && filterData.type === '2')"
                >
                    <template slot-scope="scope">
                        <div class="status-wrapper">
                            <div
                                class="status-dot normal"
                                v-if="scope.row.verify === -2 || scope.row.verify === -3"
                            />
                            <div
                                v-else
                                :class="['status-dot',scope.row.verify === 1 ? 'warning' : (scope.row.verify === 2 ? 'success' : 'danger')]"
                            />
                            <div class="status-name">{{ scope.row.verify | statusName }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="申请时间"
                    align="center"
                    width="200"
                    key="create_time"
                    v-if="!(filterData.pass_sub_type === 4 && filterData.type === '2')"
                >
                    <template slot-scope="scope">
                        {{ scope.row.create_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="公示期截止时间"
                    align="center"
                    width="200"
                    key="shop_close_time"
                    :formatter="emptyFormatter"
                    v-if="filterData.type === '2' && (filterData.pass_sub_type === 1 || filterData.pass_sub_type === 2)"
                >
                    <template slot-scope="scope">
                        {{ scope.row.shop_close_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    :render-header="(h, title, content) => renderHeader(h, '退款金额', '此处退款金额只是标记展示作用，为“操作”模块手动输入作为该商家需要进行退款的金额。')"
                    prop="refund_money"
                    key="refund_money"
                    align="center"
                    :formatter="emptyFormatter"
                    v-if="filterData.type === '2' && (filterData.pass_sub_type === 3 || filterData.pass_sub_type === 4)"
                >
                    <template slot-scope="scope">
                        {{ Number(scope.row.refund_money) ? Number(scope.row.refund_money).toFixed(2) : '--' }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="协议状态"
                    align="center"
                    width="200"
                    key="status"
                    :formatter="emptyFormatter"
                    v-if="filterData.type === '2' && (filterData.pass_sub_type === 2 || filterData.pass_sub_type === 3)"
                >
                    <template slot-scope="scope">
                        {{ scope.row.step | stepFilter }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="物流信息"
                    align="center"
                    width="200"
                    key="close_contract_receive"
                    :formatter="emptyFormatter"
                    v-if="filterData.type === '2' && filterData.pass_sub_type === 3"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.close_contract_receive_tracking_no">
                            <div>{{ scope.row.close_contract_receive_logistics_name }}</div>
                            <div>{{ scope.row.close_contract_receive_tracking_no }}</div>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="deal_time_verify"
                    label="审核处理时间"
                    key="deal_time_verify"
                    align="center"
                    width="200"
                    sortable="custom"
                    v-if="filterData.type == 1"
                >
                    <template slot-scope="scope">
                        <div class="status-wrapper">
                            <div :class="`status-dot ${ handleTimeDotStyle(scope.row.deal_time_verify) }`"/>
                            {{ scope.row.deal_time_verify * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="deal_time_close_contract"
                    label="协议处理时间"
                    align="center"
                    key="deal_time_close_contract"
                    width="200"
                    sortable="custom"
                    v-if="filterData.type == 2 && filterData.pass_sub_type === 2"
                >
                    <template slot-scope="scope">
                        <div class="status-wrapper">
                            <div :class="`status-dot ${ handleTimeDotStyle(scope.row.deal_time_close_contract) }`"/>
                            {{ scope.row.deal_time_close_contract * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="deal_time_refund"
                    label="预计打款时间"
                    align="center"
                    key="deal_time_refund"
                    width="200"
                    sortable="custom"
                    v-if="filterData.type == 2 && filterData.pass_sub_type === 4"
                >
                    <template slot-scope="scope">
                        <div class="status-wrapper">
                            <div :class="`status-dot ${ paymentDotStyle(scope.row.deal_time_refund) }`"/>
                            {{ scope.row.deal_time_refund * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="上传时间"
                    align="center"
                    width="200"
                    key="refund_time"
                    :formatter="emptyFormatter"
                    v-if="filterData.type === '2' && filterData.pass_sub_type === 4"
                >
                    <template slot-scope="scope">
                        {{ scope.row.refund_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="left"
                    width="200"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <div class="option-btn-group">
                            <el-button
                                type="text"
                                size="medium"
                                :style="scope.row.refund_complete ? {color: '#999'} : {}"
                                v-if="filterData.type == 2 && filterData.pass_sub_type === 4"
                                @click="setRefundComplete(scope.row)"
                            >
                                {{ scope.row.refund_complete === 1 ? '已打款' : '未打款' }}
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="filterData.type == 2 && filterData.pass_sub_type === 4"
                                @click="showHandleTimeDialog(scope.row, 3)"
                            >
                                设置打款时间
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="filterData.type == 1"
                                @click="showHandleTimeDialog(scope.row, 1)"
                            >
                                设置处理时间
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="filterData.type == 2 && filterData.pass_sub_type === 2"
                                @click="showHandleTimeDialog(scope.row, 2)"
                            >
                                设置处理时间
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="scope.row.verify !== 1"
                                @click="showStopReasonDialog(scope.row.apply_no)"
                            >
                                终止
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                @click="toReturnShopDetail(scope.row)"
                            >
                                详情
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="scope.row.step === 5 && scope.row.close_contract_receive_tracking_no"
                                @click="handleSignFor(scope.row.apply_no)"
                            >
                                签收
                            </el-button>
                            <el-button
                                type="text"
                                size="medium"
                                v-if="filterData.type === '2' && (filterData.pass_sub_type === 3 || filterData.pass_sub_type === 4)"
                                @click="showRefundMoneyDialog(scope.row)"
                            >
                                退款金额
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <!-- 打款时间弹窗 -->
        <el-dialog
            :title="dialogType === 3 ? '设置打款时间' : '设置处理时间'"
            width="560px"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            @close="handleTime = ''"
        >
            <el-form>
                <el-form-item
                    :label="dialogType === 3 ? '设置打款时间' : '设置处理时间'"
                >
                    <el-date-picker
                        v-model="handleTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="23:59:59"
                        size="medium"
                        style="width: 400px"
                        value-format="timestamp"
                        :picker-options="pickerOptions"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleConfirm"
                >
                    确认
                </el-button>
            </span>
        </el-dialog>
        <!-- 设置退款金额弹窗 -->
        <el-dialog
            title="设置退款金额"
            width="560px"
            :close-on-click-modal="false"
            :visible.sync="refundMoneyDialog"
            @close="refund_money_form.refund_money = ''"
        >
            <el-form
                :model="refund_money_form"
                label-width="78px"
                ref="ruleForm"
                @submit.native.prevent
            >
                <el-form-item
                    label="退款金额"
                    prop="refund_money"
                    :rules="[
                        {required: true, message: '请填写退款金额', trigger: 'blur'},
                        {pattern: /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/, message: '退款金额必须为数字', trigger: 'blur'}
                    ]"
                >
                    <el-input
                        v-model="refund_money_form.refund_money"
                        size="medium"
                        style="width: 400px"
                        @keydown.enter.native="handleSetRefundMoney"
                    >
                        <span
                            slot="suffix"
                            style="margin-right: 6px"
                        >
                            元
                        </span>
                    </el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                    @click="refundMoneyDialog = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleSetRefundMoney"
                >
                    确认
                </el-button>
            </span>
        </el-dialog>
        <!-- 终止弹窗 -->
        <reject-dialog
            ref="rejectDialog"
            :visible.sync="rejectDialog"
            placeholder="请输入终止原因"
            :maxlength="100"
            @confirm="handleStopApply(apply_no, $event)"
        />
        <!-- /终止弹窗 -->
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import RejectDialog from "@/components/dialog/reject-dialog";

export default {
    name: 'ReturnShopList',
    mixins: [back],
    components: {RejectDialog},
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < new Date(new Date().setHours(0, 0, 0, 0));
                }
            },
            apply_no: '',
            filterData: {
                // 1:待审核 2:已通过 -1:已拒绝 -2:已撤销
                type: '1',
                // 1:正在公示期 2:公示期结束 3:待商家寄回协议 4:上传回执单
                pass_sub_type: 1,
                // 店铺信息
                shop_keyword: '',
                // 企业名称
                company_keyword: '',
                // 联系方式
                contact_keyword: '',
                // 客户类型
                shop_group: 99,
                // 申请时间
                create_start_time: '',
                create_end_time: '',
                sort_field: '',
                sort_type: '',
            },
            tableData: [],
            tableLoading: false,
            rejectDialog: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            dateTimeRange: [],
            // 弹窗设置处理时间
            handleTime: '',
            passStatusList: [
                {label: '正在公示期', value: 1},
                {label: '公示期结束', value: 2},
                {label: '待商家寄回协议', value: 3},
                {label: '待上传回执单', value: 4},
                {label: '已上传回执单', value: 5},
            ],
            dialogVisible: false,
            // 1处理时间 2打款时间
            dialogType: 1,
            // 退款金额弹窗
            refundMoneyDialog: false,
            // 设置退款金额
            refund_money_form: {
                apply_no: '',
                refund_money: '',
            },
            nowTime: Number(this.$moment().format('x')),
            shop_group_list: [],
            authResult: {}
        };
    },
    filters: {
        statusName(val) {
            switch (val) {
                case 1:
                    return '待审核';
                case 2:
                    return '已通过';
                case -1:
                    return '已拒绝';
                case -2:
                    return '已终止';
                case -3:
                    return '已撤销';
                default:
                    return '';
            }
        },
        stepFilter(type) {
            switch (type) {
                case 0:
                    return '未开始';
                case 1:
                    return '公示期';
                case 2:
                    return '未上传退店协议';
                case 3:
                    return '退店协议待确认';
                case 4:
                    return '退店协议拒绝';
                case 5:
                    return '退店协议待签收';
                case 6:
                    return '退店协议已签收';
                case 7:
                    return '退店回执单完成';
                default:
                    return '--';
            }
        },
    },
    computed: {},
    watch: {
        dateTimeRange(value) {
            this.filterData.create_start_time = value ? value[0] / 1000 : '';
            this.filterData.create_end_time = value ? value[1] / 1000 : '';
            this.getTableData(1);
        }
    },
    mounted() {
        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '店铺管理'}, {title: '退店管理'}]);
        this.authResult = this.$route.meta.authResult;
        let now_page = sessionStorage.getItem('return_shop_now_page');
        let filterData = sessionStorage.getItem('return_shop_filter_data');

        if (now_page && filterData) {
            this.filterData = JSON.parse(filterData);
            if (JSON.parse(filterData).create_start_time) {
                this.$refs.datetimerange.userInput = [this.$moment(JSON.parse(filterData).create_start_time * 1000).format('YYYY-MM-DD HH:mm:ss'), this.$moment(JSON.parse(filterData).create_end_time * 1000).format('YYYY-MM-DD HH:mm:ss')];
            } else {
                this.$refs.datetimerange.userInput = [];
            }
            sessionStorage.removeItem('return_shop_filter_data');
            sessionStorage.removeItem('return_shop_now_page');
            this.getTableData(Number(now_page));
        } else {
            this.getTableData();
        }
        this.getShopGroupList();
    },

    methods: {

        /**
         * 获取客户类型列表
         */
        getShopGroupList() {
            this.$post('/student/shop_group%5Cget_list_for_select', {}, resp => {
                if (resp.code === 1) {
                    this.shop_group_list = resp.data.list;
                }
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {

            this.tableLoading = true;
            let params = {...this.filterData};

            params.page_id = page || this.page.now_page;
            this.$post('/student/shop_close_apply%5Cget_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 显示终止申请原因弹窗
         * @param no
         */
        showStopReasonDialog(no) {
            if (!this.authResult.auth_stop) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$refs.rejectDialog.title = '终止原因';
            this.apply_no = no;
            this.rejectDialog = true;
        },

        /**
         * @description 终止申请
         * @param no
         * @param reason
         */
        handleStopApply(no, reason) {
            let params = {
                apply_no: no,
                reason
            };

            this.$post('/student/shop_close_apply%5Cstop', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        type: 'success',
                        duration: 2000
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 自定义表格标题hover提示
         */
        renderHeader(h,title, content){
            return h('span', {}, [
                h('span', {style: 'font-weight: bold'}, title),
                h('el-popover', { props: { placement: 'top-start', width: '200', trigger: 'hover', content: content }}, [
                    h('i', { slot: 'reference', class:'el-icon-question', style: 'color:#666;margin-left: 6px'}, '')
                ])
            ]);
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 签收协议
         * @param no
         */
        handleSignFor(no) {
            if (!this.authResult.auth_sign) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$confirm('签收后该状态不可变更，确认是否签收?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    apply_no: no
                };

                this.$post('/student/shop_close_apply%5Csign_close_contract', params, resp => {
                    if (resp.code === 1) {
                        this.$message.success('签收成功');
                        this.getTableData();
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 数据导出
         */
        handleExport() {
            let params = {...this.filterData};

            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let queryStr = Object.keys(params)
                .map(key => `${key}=${params[key]}`)
                .join('&');
            let url = `${base}/student/shop_close_apply%5Cexport_list?${queryStr}&__ticket=${ticket}`;

            window.open(url);
        },

        /**
         * 确认修改处理时间
         * @param row
         * @param type 1审核处理时间 2退店协议处理时间 3打款时间
         */
        showHandleTimeDialog(row, type) {
            this.apply_no = row.apply_no;
            this.dialogType = type;
            this.dialogVisible = true;
        },

        /**
         * 确认修改处理时间
         */
        handleConfirm() {
            let params = {
                apply_no: this.apply_no,
                type: this.dialogType,
                deal_time: this.handleTime / 1000
            };

            this.$post('/student/shop_close_apply%5Cset_deal_time', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '设置成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.dialogVisible = false;
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 处理时间时间前dot样式
         * @param val
         * @returns {string}
         */
        handleTimeDotStyle(val) {
            let now = this.nowTime;
            let leftTime = val * 1000 - now;
            let day = Math.floor(leftTime / (24 * 3600 * 1000));

            if (day < 0) {
                return 'normal';
            } else if (day >= 0 && day < 7) {
                return 'danger';
            } else if (day === 7) {
                return 'warning';
            } else {
                return 'success';
            }
        },

        /**
         * 打款时间时间前dot样式
         * @param val
         * @returns {string}
         */
        paymentDotStyle(val) {
            let now = this.nowTime;
            let leftTime = val * 1000 - now;
            let day = Math.floor(leftTime / (24 * 3600 * 1000));

            if (day < 0) {
                return 'normal';
            } else if (day >= 0 && day < 2) {
                return 'danger';
            } else if (day >= 2 && day < 9) {
                return 'warning';
            } else {
                return 'success';
            }
        },

        /**
         * 处理排序
         * @param data
         */
        handleSortChange(data) {
            console.log(data);
            let sortFieldMap = {
                deal_time_verify: 1,
                deal_time_close_contract: 2,
                deal_time_refund: 3
            };

            let sortTypeMap = {
                ascending: 0,
                descending: 1
            };

            if (data.order) {
                this.filterData.sort_field = sortFieldMap[data.prop];
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 设置已打款标识
         * @param row
         */
        setRefundComplete(row) {
            let params = {
                apply_no: row.apply_no,
                refund_complete: row.refund_complete === 1 ? 0 : 1
            };

            this.$post('/student/shop_close_apply%5Cset_refund_complete', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '设置成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 跳转详情
         * @param row
         */
        toReturnShopDetail(row) {
            sessionStorage.setItem('return_shop_now_page', this.page.now_page);
            sessionStorage.setItem('return_shop_filter_data', JSON.stringify(this.filterData));
            this.handleRoute('ReturnShopDetail', {no: row.apply_no});
        },

        /**
         * 显示设置退款金额弹窗
         * @param row
         */
        showRefundMoneyDialog(row) {
            this.refund_money_form.apply_no = row.apply_no;
            this.refund_money_form.refund_money = row.refund_money;
            this.refundMoneyDialog = true;
            this.$refs.ruleForm.clearValidate();
        },

        /**
         * 设置退款金额
         */
        handleSetRefundMoney() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = {
                        apply_no: this.refund_money_form.apply_no,
                        refund_money: this.refund_money_form.refund_money
                    };

                    this.$post('/student/shop_close_apply%5Cset_refund_money', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '设置成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.getTableData();
                            this.refundMoneyDialog = false;
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        },

        doTableLayout() {
            this.$nextTick(() => {
                this.$refs.table.doLayout();
            });
            this.getTableData(1);
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        padding: 24px;
        background: #fff;
        box-sizing: border-box;

        /*header*/

        .header {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
                margin-left: 12px;
                margin-bottom: 24px;

                &::before {
                    content: '';
                    position: absolute;
                    left: -8px;
                    top: -1px;
                    width: 3px;
                    height: 20px;
                    background: #1890FF;
                }
            }
        }

        /*筛选*/

        .filter-view {
            margin-top: 8px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .header-new-box {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                white-space: nowrap;
                margin-right: 24px;
                margin-bottom: 24px;

                &-title {
                    margin-right: 16px;
                    white-space: nowrap;
                }
            }
        }

        /*el-tabs*/

        /deep/ .el-tabs {
            margin-top: -16px;

            .el-tabs__nav-wrap {
                height: 44px;

                .el-tabs__nav-scroll {
                    .el-tabs__nav {
                        height: 44px;
                        line-height: 44px;
                    }
                }
            }
        }

        /deep/ .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #F0F2F5;
        }

        .data-table {
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            // 操作按钮
            .option-btn-group {
                .el-button {
                    margin-left: 0;
                    margin-right: 10px;
                }
            }

            .status-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;

                .status-dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    margin-right: 5px;

                    &.success {
                        background: #4CD964;
                    }

                    &.danger {
                        background: #FF3030;
                    }

                    &.warning {
                        background: #FFA72D;
                    }

                    &.normal {
                        background: #A6A6A6;
                    }
                }
            }
        }

        /* 分页 */

        .pagination-wrapper {
            padding-top: 10px;

            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-dialog__footer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -24px;
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/ .el-table th.gutter {
        display: table-cell !important;
    }
}
</style>
